<template>
  <div class="setRole">
    <!-- 分配权限 -->
    <el-dialog :title="'为【' + myname + '】分配权限'" :visible="showRole">
      <el-tree
        ref="mytree"
        :data="roleList"
        :props="{ label: 'name' }"
        node-key="id"
        default-expand-all
        show-checkbox
        check-strictly
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button @click="submit" type="primary">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllPerApi } from '@/api/permission'
import { getRoleDetailApi, setRoleRightApi } from '@/api/role'
export default {
  // myname：当前分配权限的角色名
  // showRole：控制面板的显示与隐藏
  props: ['myname', 'showRole'],
  data () {
    return {
      // 权限列表
      roleList: [],
      // 当前操作的角色的 id
      roleId: ''
    }
  },
  methods: {
    // 得到当前角色对应的权限列表
    async getRightById (id) {
      // 保存 id
      this.roleId = id
      const res = await getRoleDetailApi(id)
      // 将得到的角色的权限列表渲染到页面上
      this.$refs.mytree.setCheckedKeys(res.data.permIds)
    },
    // 得到所有的权限列表
    async getAllPer () {
      const res = await getAllPerApi()
      this.roleList = this.trunData(res.data, '0')
    },
    // 转换为树状结构的方法
    trunData (arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const son = this.trunData(arr, item.id)
          if (son.length > 0) {
            item.children = son
          }
          res.push(item)
        }
      })
      return res
    },
    cancle () {
      // 关闭面板
      this.$emit('update:showRole', false)
    },
    // 提交权限
    async submit () {
      // 得到所有的权限集合
      const rightList = this.$refs.mytree.getCheckedKeys()
      await setRoleRightApi({
        id: this.roleId,
        permIds: rightList
      })
      // 提示
      this.$message.success('修改权限成功')
      // 关闭面板
      this.$emit('update:showRole', false)
    }
  },
  created () {
    this.getAllPer()
  }
}
</script>

<style></style>
